<template>
  <div>
    <div id="htmlDom" :style="{ width: `${width}px`, height: `${height}px` }">
      <slot></slot>
    </div>
  </div>
</template>
<script>
import html2canvas from "html2canvas";
export default {
  props: {
    downloadName: {
      type: String,
      default: "图片"
    },
    width: {
      type: Number,
      default: 500
    },
    height: {
      type: Number,
      default: 500
    }
  },
  data() {
    return {};
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 下载
    saveImg() {
      html2canvas(document.getElementById("htmlDom"), {
        useCORS: true,
        allowTaint: false
      }).then(canvas => {
        const MIME_TYPE = "image/png";
        const imgURL = canvas.toDataURL("image/png");
        const link = document.createElement("a");
        link.download = this.downloadName;
        link.href = imgURL;
        link.dataset.downloadurl = [MIME_TYPE, link.download, link.href].join(":");
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      });
    }
  }
};
</script>
<style lang="scss"></style>
